<template>
	<div class="max">
		<my-header>
			<div slot="title">
				宝宝食谱
			</div>
		</my-header>
		<div class="cont-nof">
			<div class="week oh">
				{{weekInfo.year}} 年 {{weekInfo.month}} 月第 {{weekInfo.ofweek}} 周 ({{weekInfo.start}} - {{weekInfo.end}})
			</div>
			<div class="plan oh">
				<template>
					<div class="add_play_2 oa">
						<div class="add_title tl">
							食谱图片
						</div>
						<div class="upload_box oa">
							<img v-for="item in imgList" @click="previewImage(item.url)" :src="item.url" alt="" width="100%">
						</div>
						<div class="add_title tl">
							菜色图片
						</div>
						<swiper :options="swiperOption">
							<swiper-slide v-for="(list, index) in foodList" :key="index">
								<div v-for="(item,index2) in list" :key="index2" class="fl" style="width: 33.33%;height:13rem;" @click="previewImage(item.imageList[0].url)">
									<img :src="item.imageList[0].url" alt="" style="width: 10rem;height: 10rem;border-radius: 50%;">
									<div class="tc" style="font-size: 1.2rem;height: 3rem;">
										{{item.name}}
									</div>
								</div>
							</swiper-slide>
						</swiper>
					</div>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
	import timeSelect from '@/components/timeSelect.vue'
	import wx from "weixin-js-sdk";
	import uploadFile from '@/components/uploadFile.vue';

	const fix2 = function(val) {
		if (val < 10) return '0' + val
		else return val
	}
	const getMonthData = function(a, b) {
		//当月1号是周几
		let w = new Date(a, parseInt(b) - 1, 1).getDay();
		if (w == 0) w = 7;
		//第一个周一是几号
		let fw;
		if (w != 1) fw = 7 - w + 2;
		else fw = 1;

		// 当月总天数
		let td = new Date(a, parseInt(b), 0).getDate();

		//当月总共有几周
		let tw = Math.ceil((td - fw + 1) / 7);

		let dateList = []; //日期列表
		let weekList = []; //周列表

		for (let i = fw; i <= td; i++) {
			dateList.push(fix2(i))
		}

		for (let i = 0, len = dateList.length; i < len; i += 7) {
			weekList.push(dateList.slice(i, i + 7));
		}

		for (let i = 0; i < weekList.length; i++) {
			let fill = 7 - weekList[i].length;
			for (let m = 1; m <= fill; m++) {
				weekList[i].push(fix2(m))
			}
		}

		let config = {
			year: a, //年
			month: fix2(b), //月
			first_date_week: fix2(w), //当月1号是周几
			first_week_date: fix2(fw), //当月第一个周一是几号
			total_days: td, //当月总天数
			weekList: weekList, //周列表
		}

		return config
	}
	export default {
		components: {
			timeSelect,
			uploadFile
		},
		data() {
			let time = new Date();
			let year = time.getFullYear();
			let month = time.getMonth() + 1;
			let date = time.getDate();
			return {
				share: false,
				imgList: [],
        kindergartenId:'',
				type: '',
				time: [year, fix2(month), fix2(date)],
				weekInfo: {},
				monthList: {},
				access: '',
				foodList: [],
				swiperOption: {
					height: 240,
					centeredSlides: false,
					observer: true, //修改swiper自己或子元素时，自动初始化swiper
					observeParents: true, //修改swiper的父元素时，自动初始化swiper
				},
			}
		},
		watch: {
			time(val, oldVal) {
				if (val[0] != oldVal[0]) {
					this.buildMonthList();
				}
			}
		},
		methods: {
			toShare() {
				this.share = true;
			},
			previewImage(url) {
				wx.previewImage({
					previewImage: url,
					urls: [url]
				})
			},
			fetchCookbook() {
				let param = {
					kindergartenId: this.kindergartenId,
					year: this.weekInfo.year,
					month: this.weekInfo.month,
					ofweek: this.weekInfo.ofweek,
				}
				this.$http.fetchShareCookbookInfo(param).then(resp => {
					this.imgList = resp.data.imageList;
					console.log(this.imgList)
				})
			},
			// 设置显示周
			setDuring(index) {
				this.weekInfo.ofweek = index + 1;
				let start = Number(this.weekInfo.weekList[index][0]);
				let end = Number(this.weekInfo.weekList[index][6]);
				let month = Number(this.weekInfo.month);
				this.weekInfo.start = fix2(month) + '.' + fix2(start);
				if (end < start) {
					this.weekInfo.end = fix2(month + 1) + '.' + fix2(end);
				} else {
					this.weekInfo.end = fix2(month) + '.' + fix2(end);
				}
			},
			buildMonthList() {
				for (let i = 1; i < 13; i++) {
					let everyMonth = getMonthData(this.time[0], i);
					this.monthList[everyMonth.month] = everyMonth;
				};
				this.compWeek();
			},
			compWeek() {
				this.weekInfo = this.monthList[this.time[1]];
				let d = Number(this.time[2]);
				let fd = Number(Number(this.weekInfo.first_week_date));
				let month = Number(this.time[1]);
				if (d < fd) { //如果现在的日期小于这个月第一个周一的日期，则这天属于上个月最后一周
					this.weekInfo = this.monthList[fix2(month - 1)];
					this.setDuring(this.monthList[fix2(month - 1)].weekList.length - 1);
				} else {
					let index = parseInt((d - fd) / 7);
					this.setDuring(index);
					this.time[2] = this.weekInfo.weekList[index][0];
				}
			},
			findWeek() {
				this.compWeek();
				this.fetchCookbook();
			},
			getTime(val) {
				if (this.type == "") {
					this.time = val;
					this.findWeek();
				}
			},
			fetchFood() {
				this.$http.fetchFoodShareInfo({
					kindergartenId: this.kindergartenId
				}).then(resp => {
					let data = resp.data;
					for (let i = 0; i < data.length; i += 6) {
						this.foodList.push(data.slice(i, i + 6))
					}
				})
			}
		},
		created() {
			this.weekInfo = this.$route.query;
			this.kindergartenId = this.$route.query.kindergartenId;
			this.buildMonthList();
		},
		mounted() {
			this.fetchFood();
			this.fetchCookbook();
		}
	}
</script>

<style scoped>
	.week {
		width: 100%;
		height: 5rem;
		line-height: 5rem;
		margin-bottom: 1.5rem;
		background: #FFFFFF;
		box-sizing: border-box;
		font-size: 1.6rem;
	}

	.time-block {
		margin: 0 3rem;
		background: #EBEFF2;
		padding: 0.5rem 1rem;
		font-size: 1.6rem;
		border-radius: 4px;
	}

	.plan {
		height: calc(100% - 6.5rem);
		width: 100%;
		background: #FFFFFF;
		font-size: 1.6rem;
		color: rgba(16, 16, 16, 1);
	}

	.add_title {
		width: 100%;
		font-size: 1.6rem;
		height: 2.4rem;
		line-height: 2.4rem;
		margin: 1.5rem 1rem;
	}

	.upload_box {
		width: calc(100% - 4rem);
		margin: auto;
	}

	.add_play_2 {
		width: 100%;
		overflow-x: hidden;
		height: calc(100% - 3rem);
	}
</style>
